@extends('admin.master')

@section('style')
	<link rel="stylesheet" href="{{ url('css/bootstrap-datetimepicker.css') }}">
@endsection

@section('top')
<div class="top-breadcrumb pull-left">{!! Breadcrumbs::render('progress-tongji') !!}</div>
@endsection

@section('content')
<div class="section-search mb10">
{!! Form::model($range, ['method'=>'get', 'class'=>'form-inline']) !!}
	<div class="form-group">
		<label class="control-label">开始时间：</label>
		<div class="form-datetime datetime-search len150">
			{!! Form::text('start', $range['start'], ['class'=>'form-control len150 datetimepicker-start', 'v-model'=>'datetime.start', 'data-date-format'=>'yyyy-mm-dd']) !!}
			<i class="icon icon-date"></i>
		</div>
	</div>
	<div class="form-group">
		<label class="control-label">结束时间：</label>
		<div class="form-datetime datetime-search len150">
			{!! Form::text('end', $range['end'], ['class'=>'form-control len150 datetimepicker-end', 'v-model'=>'datetime.end', 'data-date-format'=>'yyyy-mm-dd']) !!}
			<i class="icon icon-date"></i>
		</div>
	</div>
	<button type="submit" class="btn btn-default">查询</button>
{!! Form::close() !!}
</div>
<div id="view" class="tongji-viewer">
	<div class="row">
		<div class="col-sm-5">
			<div class="month-count">
				<div class="panel panel-default panel-max">
					<div class="panel-heading"><h3 class="panel-title">网站统计</h3></div>
					<div class="panel-body">
						<table class="table">
							<thead>
								<tr class="active">
									<th>下单</th>
									<th>设计确认</th>
									<th>程序确认</th>
									<th>PSD确认</th>
									<th>上线</th>
									<th>未上线</th>
								</tr>
								<tr>
									<td v-for="item in web">
										@{{ item }}
									</td>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-7">
			<div class="other-count">
				<div class="panel panel-default panel-max">
					<div class="panel-heading"><h3 class="panel-title">其他订单统计</h3></div>
					<div class="panel-body">
						<table class="table">
							<thead>
								<tr class="active">
									<th>下单</th>
									<th>下单明细</th>
									<th>开发单</th>
									<th>设计确认</th>
									<th>程序确认</th>
									<th>PSD确认</th>
									<th>总完成</th>
									<th class="text-center">网站完成</th>
								</tr>
								<tr>
									<td>@{{ other.create }}</td>
									<td>
										<span class="label label-success">定制 - @{{ other.createDetail[1] ? other.createDetail[1] : 0  }}</span>
										<span class="label label-primary">PSD - @{{ other.createDetail[2] ? other.createDetail[2] : 0 }}</span>
										<span class="label label-default">其他 - @{{ other.createDetail[3] ? other.createDetail[3] : 0 }}</span>
									</td>
									<td>@{{ other.createDevelop }}</td>
									<td>@{{ other.design }}</td>									
									<td>@{{ other.program }}</td>									
									<td>@{{ other.psd }}</td>
									<td>@{{ other.online }}</td>
									<td class="text-center"><b class="text-success">@{{ other.webOnline }}</b></td>										
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>	
	</div>
	<div class="row">
		<div class="col-sm-5">
			<div class="panel panel-default panel-max">
				<div class="panel-heading"><h3 class="panel-title">小组完成量统计 [仅直销]</h3></div>
				<div class="panel-body">
					<table class="table">
						<thead>
							<tr class="active">
								<th>组名</th>
								<th>下单</th>
								<th>上线</th>
								<th>未上线</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(index, item) in teamConfig">
								<td>@{{ item }}</td>
								<td>
									<span class="label label-success">总共：@{{ team[index].order[1] + team[index].order[2] }}</span>
									<span class="label label-primary">定制：@{{ team[index].order[1] }}</span>
									<span class="label label-info">架构：@{{ team[index].order[2] }}</span>
								</td>
								<td>@{{ team[index].online }}</td>
								<td>@{{ team[index].unfinish[1] + team[index].unfinish[2] }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="col-sm-7">
			<div class="detail-count">
				<div class="panel panel-default panel-max">
					<div class="panel-heading"><h3 class="panel-title">网站进度明细统计</h3></div>
					<div class="panel-body">
						<table class="table table-hover">
							<thead>
								<tr class="active">
									<th>姓名</th>
									<th>未完成网站</th>
									<th>未完成录入</th>
									<th>下单量</th>
									<th>下单明细</th>
									<th>设计确认</th>
									<th>程序确认</th>
									<th>PSD确认</th>
									<th>录入完成量</th>
									<th class="text-center">发布量</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in detail">
									<td><span class="text-info">@{{ item.name }}</span></td>
									<td>@{{ item.unfinished }}</td>
									<td>@{{ item.uninputed }}</td>
									<td>
										@{{ (item.create.A1+item.create.A3+item.create.A2+item.create.A4)/2 + item.create.B }}
									</td>
									<td>
										<span class="label label-success">设计：@{{ item.create.A1 + item.create.A3 }}</span>
										<span class="label label-success">程序：@{{ item.create.A2 +  item.create.A4 }}</span>
										<span class="label label-info">架构：@{{ item.create.B }}</span>
									</td>
									<td>@{{ item.design + item.design_other }}</td>
									<td>@{{ item.program + item.program_other }}</td>
									<td>@{{ item.psd + item.psd_other }}</td>
									<td>
										@{{ item.inputed + item.inputed_other }}
									</td>
									<td class="active text-center text-success">
										@{{ item.online + item.online_other }}
									</td>
								</tr>
							</tbody>
						</table>
						<div class="loading loading-tongji" v-show="loading">
							<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
</div>
@endsection

@section('foot')
<script src="{{ url('js/bootstrap-datetimepicker.js') }}"></script>
<script>
	$('.datetimepicker-start').datetimepicker({
		language: 'zh-CN',
		autoclose: true,
		weekStart: 1,
		minView: 'month'
	});
	$('.datetimepicker-end').datetimepicker({
		language: 'zh-CN',
		autoclose: true,
		weekStart: 1,
		minView: 'month'
	});

	var vm = new Vue({
		el: '#framework',
		data: {
			loading: false,
			datetime: {start: '', end: ''},
			web: [],
			other: [],
			team: [],
			teamConfig: {!! json_encode(config('system.team')) !!},
			detail: []
		},
		ready: function() {
			this.loading = true;
			this.fetchData();
		},
		methods: {
			fetchData: function() {
				var self = this;

				$.getJSON("{{ url('admin/countpart/web') }}", this.datetime, function(json) {
					self.web = json.data;
				});

				$.getJSON("{{ url('admin/countpart/other') }}", this.datetime, function(json) {
					self.other = json.data;
				});

				$.getJSON("{{ url('admin/countpart/team') }}", this.datetime, function(json) {
					self.team = json.data;
				});

				$.getJSON("{{ url('admin/countpart/detail') }}", this.datetime, function(json) {
					self.detail = json.data;
					self.loading = false;
				});
			}
		}
	});
</script>
</script>	
@endsection